<template>
  <div class="team-contant w-full h-full" style="padding: 10px" v-loading="loading">
    <div style="display: inline-flex; align-items: center; padding: 10px">
      <el-tabs
        v-model="activeName"
        class="demo-tabs w-full"
        :class="{ 'opacity-0': arrowRight }"
        @tab-click="handleClick"
      >
        <el-tab-pane label="企业回复" name="0"></el-tab-pane>
        <el-tab-pane label="个人回复" name="1"></el-tab-pane>
      </el-tabs>
    </div>
    <div style="display: flex; flex-direction: column; padding: 10px" class="w-full">
      <div class="title">{{ activeName == "0" ? "企业回复" : "个人回复" }}</div>
      <div class="tips">预先设置一些常见的回复用语，帮助客服人员提高服务效率</div>

      <el-row flex justify="space-between">
        <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
          <el-button type="primary" @click="addGroup">添加分组</el-button>
          <!-- <el-button type="default" @click="importGroup">导入数据</el-button> -->
          <!-- <el-button type="default" @click="clearGroup">清空数据</el-button> -->
        </el-col>
        <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
          <!-- <el-input
            v-model="form.name"
            type="text"
            @change="getData"
            placeholder="请输入关键词"
            @keyup.enter="getData"
          /> -->
        </el-col>
      </el-row>

      <div style="">
        <el-card v-for="(item, index) in list" :key="index" style="margin-top: 20px">
          <el-row flex justify="space-between" class="w-full">
            <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
              <div class="title">{{ item.name }}</div></el-col
            >
            <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
              <el-button type="text" @click="addResponse(item)">添加回复</el-button>
              <el-button type="text" @click="handleEditQuestion(item)">编辑</el-button>
              <el-button type="text" @click="handleDeleteQuestion(item)">删除</el-button>
            </el-col>
          </el-row>
          <div style="padding: 10px 20px">
            <div v-for="(utem, undex) in item.replys" :key="undex">
              <el-row flex justify="space-between" class="w-full">
                <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
                  <div class="title">{{ utem.question }}</div></el-col
                >
                <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
                  <el-button type="text" @click="handleEdit(utem)">编辑</el-button>
                  <el-button type="text" @click="handleDelete(utem, undex)">删除</el-button>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-card>
      </div>
    </div>

    <!-- 弹窗 -->
    <el-dialog v-model="dialogVisible" :title="dialogTitle" width="500">
      <el-form>
        <el-form-item :label="inputValue1Lable">
          <el-input type="text" placeholder="请输入" v-model="inputValue1"></el-input>
        </el-form-item>
        <el-form-item :label="inputValue2Lable" v-if="editAnswer">
          <el-input type="text" placeholder="请输入" v-model="inputValue2"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleSubmit"> 确定 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import {
  onActivated,
  onDeactivated,
  onMounted,
  onUnmounted,
  ref,
  watchEffect,
  getCurrentInstance,
} from "vue";

import {
  companyQuickReply,
  updatequickReplyClassification,
  createquickReplyClassification,
  delquickReplyClassification,
  createQuestions,
  delQuestions,
  personQuickReply,
  updateQuestions,
} from "@/api/node-admin-api/quickReply.js";
import { successMessage, warnMessage, errorMessage } from "@/utils/message";

const activeName = ref("0");
const form = ref({
  name: "",
});

const loading = ref(false);
const dialogVisible = ref(false);
const dialogTitle = ref("");
const inputValue1Lable = ref("");
const inputValue2Lable = ref("");
const inputValue1 = ref("");
const inputValue2 = ref("");
const editAnswer = ref(false);
const list = ref([]);
const handleClick = ({ props }, event) => {
  const { label, name } = props;
  activeName.value = name;
  if (name == "0") {
    getTableData();
  } else {
    getPersonTableData();
  }
};

onMounted(() => {
  getTableData();
});

// 获取企业的列表数据
const getTableData = () => {
  loading.value = true;
  companyQuickReply()
    .then((res) => {
      if (res.code == 20000) {
        list.value = res.data.list;
      }
    })
    .catch((res) => {
      errorMessage(res.message);
    })
    .finally((res) => {
      loading.value = false;
      dialogVisible.value = false;
    });
};
// 获取个人的列表数据
const getPersonTableData = () => {
  loading.value = true;
  personQuickReply()
    .then((res) => {
      if (res.code == 20000) {
        list.value = res.data.list;
      }
    })
    .catch((res) => {
      errorMessage(res.message);
    })
    .finally((res) => {
      loading.value = false;
      dialogVisible.value = false;
    });
};

const handleSubmit = () => {
  if (dialogTitle.value == "添加分组") {
    creategroup();
    return;
  } else if (dialogTitle.value == "编辑分组") {
    updategroup();
    return;
  } else if (dialogTitle.value == "添加快捷回复") {
    createQuestion();
    return;
  } else if (dialogTitle.value == "修改快捷回复") {
    updateQuestion();
    return;
  }
};

const getData = () => {
  console.log("activeName.value: ", activeName.value);
  if (activeName.value == "0") {
    getTableData();
  } else {
    getPersonTableData();
  }
};

const checkInput = () => {
  if (editAnswer.value && !inputValue2.value) {
    errorMessage(`请输入${inputValue2Lable.value}`);
    return false;
  }
  if (!inputValue1.value) {
    errorMessage(`请输入${inputValue1Lable.value}`);
    return false;
  }
  return true;
};

// 新建分组
const creategroup = () => {
  loading.value = true;
  if (!checkInput()) return;
  createquickReplyClassification({
    common: activeName.value == "0" ? true : false,
    name: inputValue1.value,
  })
    .then((res) => {
      if (res.code == 20000) {
        successMessage("新增分组成功");
        getData();
      }
    })
    .catch((res) => {
      errorMessage(res.message);
    })
    .finally((res) => {
      loading.value = false;
      dialogVisible.value = false;
    });
};
// 编辑分组
const updategroup = () => {
  loading.value = true;
  if (!checkInput()) return;
  updatequickReplyClassification({
    id: detailId.value,
    name: inputValue1.value,
  })
    .then((res) => {
      if (res.code == 20000) {
        successMessage("编辑企业分组成功");
        getData();
      }
    })
    .catch((res) => {
      errorMessage(res.message);
    })
    .finally((res) => {
      loading.value = false;
      dialogVisible.value = false;
    });
};

// 新增快捷回复
const createQuestion = () => {
  const params = {
    cid: detailId.value,
    question: inputValue1.value,
    answer: inputValue2.value,
  };
  if (!checkInput()) return;
  createQuestions(params)
    .then((res) => {
      if (res.code == 20000) {
        successMessage("新增快捷回复成功");
        getData();
      }
    })
    .catch((res) => {
      errorMessage(res.message);
    })
    .finally((res) => {
      loading.value = false;
      dialogVisible.value = false;
    });
};
// 修改快捷回复
const updateQuestion = () => {
  const params = {
    cid: detailId.value,
    question: inputValue1.value,
    answer: inputValue2.value,
  };
  if (!checkInput()) return;
  updateQuestions(params)
    .then((res) => {
      if (res.code == 20000) {
        successMessage("新增快捷回复成功");
        getData();
      }
    })
    .catch((res) => {
      errorMessage(res.message);
    })
    .finally((res) => {
      loading.value = false;
      dialogVisible.value = false;
    });
};

// 添加企业 | 个人分组
const addGroup = (item) => {
  dialogVisible.value = true;
  dialogTitle.value = "添加分组";
  inputValue1Lable.value = "分组名";
  inputValue1.value = "";
  editAnswer.value = false;
};

// 添加企业 | 个人回复
const addResponse = (item) => {
  dialogVisible.value = true;
  dialogTitle.value = "添加快捷回复";
  inputValue1Lable.value = "客户问题";
  inputValue2Lable.value = "客服回答";
  inputValue1.value = "";
  inputValue2.value = "";
  editAnswer.value = true;
  detailId.value = item.cid;
};

//  修改企业分组
const detailId = ref(null);
const handleEditQuestion = (item) => {
  dialogVisible.value = true;
  dialogTitle.value = "编辑分组";
  inputValue1Lable.value = "分组名";
  inputValue1.value = item.name;
  detailId.value = item.cid;
  editAnswer.value = false;
};

// 删除企业分组
const handleDeleteQuestion = (item) => {
  delquickReplyClassification({ id: item.id })
    .then((res) => {
      if (res.code == 20000) {
        successMessage("删除企业分组成功");
        getData();
      }
    })
    .catch((res) => {
      errorMessage(res.message);
    })
    .finally((res) => {
      loading.value = false;
    });
};
//
const handleEdit = (item) => {
  dialogVisible.value = true;
  dialogTitle.value = "修改快捷回复";
  inputValue1Lable.value = "客户问题";
  inputValue2Lable.value = "客服回答";
  inputValue1.value = item.question;
  inputValue2.value = item.answer;
  editAnswer.value = true;
  detailId.value = item.cid;
};
const handleDelete = (item, index) => {
  delQuestions({ id: item.id })
    .then((res) => {
      if (res.code == 20000) {
        successMessage("删除快捷回复成功");
        getData();
      }
    })
    .catch((res) => {
      errorMessage(res.message);
    })
    .finally((res) => {
      loading.value = false;
    });
};
</script>

<style lang="scss" scoped>
.team-contant {
  display: flex;
  height: 100%;
  padding: 10px;
  flex-direction: column;
  overflow-y: auto;
  .title {
    font-size: 16px;
    font-weight: bold;
    color: var(--color-text);
  }

  .tips {
    font-size: 14px;
    padding: 20px 0;
    color: gray;
  }
}
</style>
